<template>
  <div class="container">
    <div class="tabbar">
      <div class="tabbar-item" @click="handleCheckTabbar('all',textAll)">
        <div :class="checkType === 'all' ? 'active ' : ''">{{textAll}}</div>
        <van-icon :class="openMenu&&checkType === 'all' ? 'enter' : ' out'" name="arrow-down" />
      </div>
      <div class="tabbar-item" @click="handleCheckTabbar('status',textState)">
        <div :class="checkType === 'status' ? 'active' : ''">{{textState}}</div>
        <van-icon :class="openMenu&&checkType === 'status' ? 'enter' : 'out'" name="arrow-down" />
      </div>
      <div class="tabbar-item" @click="handleCheckTabbar('sort',textSort)">
        <div :class="checkType === 'sort' ? 'active' : ''">{{textSort}}</div>
        <van-icon
          v-show="sortType === 'all'"
          :class="openMenu&&checkType === 'sort' ? 'enter' : 'out'"
          name="arrow-down"
        />
        <img v-show="sortType === '1'" src="../../assets/goods/asce_oder.png" alt="升序" />
        <img v-show="sortType === '2'" src="../../assets/goods/desc_oder.png" alt="降序" />
      </div>
      <div class="tabbar-item" @click="handleScreen">
        筛选
        <img class="screen" src="../../assets/goods/screen.png" alt="#" />
      </div>
    </div>

    <div v-if="loadingFlag" class="loading goods-items">
      <van-loading class="loading-box" type="spinner" color="#fe6018" vertical>加载中</van-loading>
    </div>

    <div v-else class="goods-content">
      <!-- 货源列表 -->
      <van-pull-refresh
        id="container"
        class="agent-refresh"
        v-model="isRefresh"
        @refresh="onRefresh"
      >
        <!-- 没有货源 -->
        <div v-if="agencyList.length<=0" class="not-goods">
          <div class="bg">
            <img src="../../assets/goods/not_goods_03.png" alt />
            <p>更多代理商品正在准备中</p>
          </div>
        </div>
        <ul v-else class="goods-items">
          <van-list
            class="item-box"
            v-model="listLoading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <li
              class="goods-item"
              v-for="(item,index) in agencyList"
              :key="index"
              @click="handleReadDetail(item.product_id)"
            >
              <div class="top">
                <h4>
                  <span v-show="item.product_area">{{item.product_area}}</span>
                  {{item.product_name}} {{item.product_place}}
                </h4>
                <p>
                  当前代理
                  <span>{{item.number}}人</span>
                </p>
              </div>
              <div class="info">
                <div class="image">
                  <img :src="item.product_img" alt="#" />
                  <span class="dialog-full" v-show="item.start_status==3">代理已满</span>
                  <span class="dialog-ds" v-show="item.is_password">
                    <img class="ds-img" src="../../assets/goods/ds2.png" alt />
                  </span>
                  <div v-show="!item.is_deposit" class="state">有订金</div>
                  <div class="dlym-mask" v-show="item.start_status==3"></div>
                </div>
                <div class="detail">
                  <div class="price">
                    <div class="item">
                      <p>总价值</p>
                      <p>{{item.product_amount ? item.product_amount +'元' : '-'}}</p>
                    </div>
                    <div class="item">
                      <p>总代理订金</p>
                      <p>{{item.product_amount_deposit ? item.product_amount_deposit +'元' : '-'}}</p>
                    </div>
                  </div>
                  <div class="rate">
                    <div class="item">
                      <p>代理费率</p>
                      <p>{{item.agent_rate ? (item.agent_rate*100).toFixed(4) + '%' : '-'}}</p>
                    </div>
                    <div class="inline"></div>
                    <div class="item">
                      <p>代理期限</p>
                      <p
                        v-if="item.payment_mode=='FLEXIBLE'"
                      >{{item.product_date + '~' + item.agency_stage_max + '个月'}}</p>
                      <p v-else>{{item.product_date ? item.product_date + '个月' : '无限期'}}</p>
                    </div>
                    <div class="inline"></div>
                    <div class="item">
                      <p>当前进度</p>
                      <p>{{ item.rate ? (item.rate * 100).toFixed(2) + '%' : '-'}}</p>
                    </div>
                  </div>
                  <div class="stores-name">
                    <img v-if="item.store_status == 1" src="@/assets/me/monopoly.png" alt="#" />
                    <img v-else-if="item.store_status == 2" src="@/assets/me/flagship.png" alt="#" />
                    <span>{{item.store_name}}</span>
                  </div>
                </div>
              </div>
              <div class="agent-status" v-if="item.start_status != 3&&item.start_status !=  4">
                <!-- 代理倒计时 -->
                <Countdown
                  v-if="item.start_status == 0 || item.start_status == 1 && countdownFlag"
                  :type-data="typeData"
                  :endTime="item.open_time_left"
                  :callback="countdownCallback"
                  :endText="endText"
                ></Countdown>
                <span class="origin" v-else-if="item.start_status==2">代理进行中</span>
                <!-- <span v-else-if="item.start_status==3">代理已满</span> -->
                <!-- <span v-else-if="item.start_status==4">已结束</span> -->
              </div>
            </li>
          </van-list>
        </ul>
      </van-pull-refresh>
    </div>

    <div class="dialog" v-show="isShow" @click="hideMenu">
      <div class="menu-item">
        <div
          :class="checkText === item.name ? 'item check' : 'item'"
          v-for="(item,index) in checkList"
          :key="index"
          @click.stop="handleCheck(item)"
        >{{item.name}}</div>
      </div>
    </div>
    <van-popup v-model="showPopup" position="right" @touchmove.prevent>
      <div class="menu-tags">
        <div
          class="tags-item"
          :class="{'hidden_type':type_Flag != 'wood'}"
          @click="type_switching('wood')"
        >
          <span>木材</span>
          <i class="bg-tag"></i>
        </div>
        <div
          class="tags-item"
          :class="{'hidden_type':type_Flag != 'furniture'}"
          @click="type_switching('furniture')"
        >
          <span>家具</span>
          <i class="bg-tag"></i>
        </div>
      </div>
      <div class="content">
        <div class="area-menu menu-box" :class="{'menu-open':areaHeight == 'auto'}">
          <div class="title">
            <p>区域</p>
            <van-icon
              v-show="areaList.length > 6"
              :class="areaHeight === 'auto' ? 'enter' : 'out'"
              name="arrow-down"
              @click="handleRead('area')"
            />
          </div>
          <div class="menu-item">
            <div
              :class="checkAreaIndex === 'all' ? 'item active' : 'item'"
              @click="handleCheckItem('area','all')"
            >全部</div>
            <div
              v-for="(item,index) in areaList"
              :key="index"
              :class="checkAreaIndex === index ? 'item active' : 'item'"
              @click="handleCheckItem('area',item.id,index)"
            >{{item.name}}</div>
          </div>
        </div>
        <div class="address-menu menu-box" :class="{'menu-open':addressHeight == 'auto'}">
          <div class="title">
            <p>产地</p>
            <van-icon
              v-show="addressList.length > 6"
              :class="addressHeight === 'auto' ? 'enter' : 'out'"
              name="arrow-down"
              @click="handleRead('address')"
            />
          </div>
          <div class="menu-item">
            <div
              :class="checkAddressIndex === 'all' ? 'item active' : 'item'"
              @click="handleCheckItem('address','all')"
            >全部</div>
            <div
              v-for="(item,index) in addressList"
              :key="index"
              :class="checkAddressIndex === index ? 'item active' : 'item'"
              @click="handleCheckItem('address',item.id,index)"
            >{{item.name}}</div>
          </div>
        </div>
        <div class="name-menu menu-box" :class="{'menu-open':nameHeight == 'auto'}">
          <div class="title">
            <p>品名</p>
            <van-icon
              v-show="nameList.length > 6"
              :class="nameHeight === 'auto' ? 'enter' : 'out'"
              name="arrow-down"
              @click="handleRead('name')"
            />
          </div>
          <div class="menu-item">
            <div
              :class="checkNameIndex === 'all' ? 'item active' : 'item'"
              @click="handleCheckItem('name','all')"
            >全部</div>
            <div
              v-for="(item,index) in nameList"
              :key="index"
              :class="checkNameIndex === index ? 'item active' : 'item'"
              @click="handleCheckItem('name',item.id,index)"
            >{{item.name}}</div>
          </div>
        </div>
        <div class="form-menu menu-box" :class="{'menu-open':fromHeight == 'auto'}">
          <div class="title">
            <p>形态</p>
            <van-icon
              v-show="fromList.length > 6"
              :class="fromHeight === 'auto' ? 'enter' : 'out'"
              name="arrow-down"
              @click="handleRead('from')"
            />
          </div>
          <div class="menu-item">
            <div
              :class="checkFromIndex === 'all' ? 'item active' : 'item'"
              @click="handleCheckItem('from','all')"
            >全部</div>
            <div
              v-for="(item,index) in fromList"
              :key="index"
              :class="checkFromIndex === index ? 'item active' : 'item'"
              @click="handleCheckItem('from',item.id,index)"
            >{{item.name}}</div>
          </div>
        </div>
        <div class="footer">
          <div class="btn" @click="handleReset">重置</div>
          <div class="btn" @click="handleEnter">确定</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Popup } from "vant";
import api from "@/api/agencyProduct";
import axios from "axios";
import md5 from "@/utils/md5";
import {
  getProductStyle,
  getProductName,
  getProductPlace,
  getAgencyList,
  getProductState,
  getProductArea,
} from "@/api/agency";
import Countdown from "../common/count-down";
export default {
  components: {
    "van-popup": Popup,
    Countdown,
  },
  data() {
    return {
      type_Flag: "wood",
      typeData: "list",
      countdownFlag: false,
      endText: "代理进行中",
      loadingFlag: false,
      isRefresh: false,
      listLoading: false,
      finished: false,
      isShow: false,
      textAll: "综合",
      textState: "状态",
      textSort: "排序",
      allList: [
        { name: "综合", type: "0" },
        { name: "专属", type: "1" },
      ], //综合列表
      stateList: [
        { name: "全部", type: "0" },
        { name: "即将开始", type: "1" },
        { name: "进行中", type: "2" },
        { name: "代理已满", type: "3" },
      ], //状态列表
      sortList: [
        { name: "按时间从低到高", type: "2" },
        { name: "按时间从高到低", type: "1" },
        { name: "按代理费率从低到高", type: "2" },
        { name: "按代理费率从高到低", type: "1" },
      ], //排序列表
      checkList: [], //当前选择的tabbar对应列表
      checkType: "all",
      sortType: "all",
      checkText: "综合",
      showPopup: false,
      openMenu: false,
      areaHeight: "117px",
      addressHeight: "130px",
      nameHeight: "130px",
      fromHeight: "130px",
      areaList: [], //区域列表
      checkAreaIndex: "all",
      checkAddressIndex: "all",
      checkNameIndex: "all",
      checkFromIndex: "all",
      addressList: [], //产地列表
      nameList: [], //品名列表
      fromList: [], //形态列表
      furParams: {
        attr_brand_id: "",
        attr_furniturecategory_id: "",
        attr_material_id: "",
        attr_place_id: "",
        commission_rateOrder: "",
        is_deposit: "",
        is_password: "",
        keyword: "",
        limit: "20",
        page: "1",
        product_stats: "",
        publish_timeOrder: "",
      },
      reqParams: {
        attr_area_id: "",
        attr_place_id: "",
        attr_state_id: "",
        attr_woodname_id: "",
        commission_rateOrder: "",
        is_deposit: "",
        is_password: "0",
        keyword: "",
        limit: "20",
        page: "1",
        product_stats: "",
        publish_timeOrder: "",
      },
      listParams: {
        style_id: 0,
        name_id: 0,
        region_id: 0,
        limit: 10,
        p: 1,
        is_password: 0,
        is_time: 0,
        is_deposit: 0,
        is_type: 0,
        is_total: 0,
        is_rate: 0,
        state_id: 0,
        area_id: 0,
      },
      agencyList: [],
      cacheId: "",
    };
  },
  watch: {
    agencyList: function (newVal) {
      this.countdownFlag = false;
      this.$nextTick(() => {
        this.countdownFlag = true;
      });
    },
  },
  created() {
    this.$store.commit("title/SET_TITLE", "海量货源");
    this.loadingFlag = true;
    this._getList();
    this._getProductArea();
    this._getProductName();
    this._getProductPlace();
    this._getProductState();
  },
  methods: {
    // 木材/家具筛选切换
    type_switching(type) {
      this.type_Flag = type;
    },
    // 获取代理木材列表
    getAgencyProductList() {
      this.loading = true;
      let obj = this.reqParams;
      for (let i in obj) {
        obj[i] = "" + obj[i];
        console.log(obj[i], typeof obj[i], "asdaasdasd");
      }
      let str = md5.hex_md5(JSON.stringify(obj));
      let params = JSON.parse(JSON.stringify(obj));
      params.sign = str;
      axios
        .get(api.AGENCYPRODUCT_URL, {
          params,
        })
        .then((res) => {
          console.log("新版获取代理商品列表res", res);
          if (res.data.code == 0) {
            console.log("新版获取代理商品列表请求成功", res);
            this.agencyList = res.data.data.dataList;
            this.wood_total = res.data.data.total;
            this.wood_limit = res.data.data.limit;
            this.wood_totalPage = res.data.data.totalPage;
            this.wood_curPage = res.data.data.curPage;
            this.paginationQuery.wood_total = +res.data.data.total;
            console.log("木材列表", this.agencyList);
          } else {
            console.log("新版获取代理商品列表请求失败", res);
          }
        })
        .catch((error) => {
          console.log(error);
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 获取代理家具列表
    getFurnitureList() {
      this.loading = true;
      let obj = this.furParams;
      for (let i in obj) {
        obj[i] = "" + obj[i];
        console.log(obj[i], typeof obj[i], "asdaasdasd");
      }
      let str = md5.hex_md5(JSON.stringify(obj));
      let params = JSON.parse(JSON.stringify(obj));
      params.sign = str;
      axios
        .get(api.FURNITURELIST_URL, {
          params,
        })
        .then((res) => {
          console.log("获取代理家具列表res", res);
          if (res.data.code == 0) {
            console.log("获取代理家具列表请求成功", res);
            this.furnitureList = res.data.data.dataList;
            this.fur_total = res.data.data.total;
            this.fur_limit = res.data.data.limit;
            this.fur_totalPage = res.data.data.totalPage;
            this.fur_curPage = res.data.data.curPage;
            this.paginationQuery.fur_total = +res.data.data.total;
            console.log("家具列表", this.furnitureList);
          } else {
            console.log("获取代理家具列表请求失败", res);
          }
        })
        .catch((error) => {
          console.log(error);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    countdownCallback() {
      return;
    },
    // 选择tabbar
    handleCheckTabbar(type, text) {
      if (this.openMenu) {
        if (this.checkType === type) {
          this.isShow = false;
          this.openMenu = false;
        } else {
          this.isShow = true;
          this.openMenu = true;
        }
      } else {
        this.isShow = true;
        this.openMenu = true;
      }
      this.checkType = type;
      switch (type) {
        case "all":
          this.checkList = this.allList;
          break;
        case "status":
          this.checkList = this.stateList;
          break;
        case "sort":
          this.checkList = this.sortList;
          break;
        default:
          break;
      }
    },
    // 选择对应头部按钮列表项
    async handleCheck(item) {
      switch (this.checkType) {
        case "all":
          this.textAll = item.name;
          this.listParams.is_password = item.type;
          break;
        case "status":
          this.textState = item.name;
          this.listParams.is_type = item.type;
          break;
        case "sort":
          if (
            item.name === "按时间从高到低" ||
            item.name === "按时间从低到高"
          ) {
            this.textSort = "时间";
            this.listParams.is_time = item.type;
            this.listParams.is_rate = 0;
          } else {
            this.textSort = "代理费率";
            this.listParams.is_rate = item.type;
            this.listParams.is_time = 0;
          }
          this.sortType = item.type;
          break;
        default:
          break;
      }
      this.checkText = item.name;
      this.openMenu = false;
      this.isShow = false;
      this.finished = false;
      this.listParams.p = 1;
      this.loadingFlag = true;
      this.agencyList = [];
      await this._getList();
      console.log(this.textAll);
    },
    // 下拉刷新
    onRefresh() {
      this.listParams.p = 1;
      this._getList();
    },
    // 上拉加载更多
    onLoad() {
      console.log("上拉加载了");
      this.listParams.p++;
      this._getList();
    },
    // 查看货源详情
    handleReadDetail(id) {
      if (id == this.cacheId) {
        this.$router.push({
          path: "/goods_detail",
          query: {
            id,
          },
        });
      } else {
        this.cacheId = id;
        localStorage.removeItem("productDetail");
        localStorage.removeItem("recordList");
        this.$router.push({
          path: "/goods_detail",
          query: {
            id,
          },
        });
      }
    },
    // 重置筛选条件
    async handleReset() {
      this.openMenu = false;
      this.checkType = "all";
      this.sortType = "all";
      for (const key in this.listParams) {
        this.listParams[key] = 0;
      }
      (this.checkAreaIndex = "all"),
        (this.checkAddressIndex = "all"),
        (this.checkNameIndex = "all"),
        (this.checkFromIndex = "all"),
        (this.showPopup = false);
      this.finished = false;
      this.listParams.p = 1;
      (this.listParams.limit = 10), (this.loadingFlag = true);
      (this.textAll = "综合"),
        (this.textState = "状态"),
        (this.textSort = "排序"),
        (this.checkText = "综合");
      this.agencyList = [];
      await this._getList();
    },
    // 打开筛选弹窗
    handleScreen() {
      this.showPopup = true;
      this.hideMenu();
    },
    // 确认筛选
    async handleEnter() {
      this.showPopup = false;
      this.finished = false;
      this.listParams.p = 1;
      this.loadingFlag = true;
      this.agencyList = [];
      await this._getList();
    },
    // 获取区域信息
    _getProductArea() {
      getProductArea()
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.areaList = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取品名信息
    _getProductName(area_id = 0, place_id = 0) {
      let req_data = {
        area_id,
        place_id,
      };
      getProductName(req_data)
        .then((result) => {
          if (result.code == 1) {
            console.log(result);
            this.nameList = result.data;
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          this.$toast.clear();
        });
    },
    // 获取产地信息
    _getProductPlace(area_id = 0) {
      let req_data = {
        area_id,
      };
      getProductPlace(req_data)
        .then((result) => {
          if (result.code == 1) {
            console.log(result);
            this.addressList = result.data;
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          this.$toast.clear();
        });
    },
    // 获取形态信息
    _getProductState() {
      getProductState()
        .then((result) => {
          if (result.code == 1) {
            console.log(result);
            for (const key in result.data) {
              this.fromList.push({ name: result.data[key], id: key });
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 关闭下拉菜单
    hideMenu() {
      this.openMenu = false;
      this.isShow = false;
    },
    // 获取货源列表
    _getList() {
      getAgencyList(this.listParams)
        .then((res) => {
          if (res.code == 1) {
            if (this.listParams.p == 1) {
              this.agencyList = res.data.list;

              console.table("货源列表", this.agencyList);
            } else {
              this.agencyList = this.agencyList.concat(res.data.list);
              console.log("加载更多后的列表数据", this.agencyList);
            }
          } else if (res.code == 10099) {
            this.finished = true;
          } else {
            console.log(res.msg);
          }
        })
        .catch(() => {
          this.agencyList = [];
        })
        .finally(() => {
          this.loadingFlag = false;
          this.isRefresh = false;
          this.listLoading = false;
        });
    },
    //展开区域选择
    handleRead(type) {
      switch (type) {
        case "area":
          this.areaHeight === "auto"
            ? (this.areaHeight = "117px")
            : (this.areaHeight = "auto");
          break;
        case "address":
          this.addressHeight === "auto"
            ? (this.addressHeight = "130px")
            : (this.addressHeight = "auto");
          break;
        case "name":
          this.nameHeight === "auto"
            ? (this.nameHeight = "130px")
            : (this.nameHeight = "auto");
          break;
        case "from":
          this.fromHeight === "auto"
            ? (this.fromHeight = "128")
            : (this.fromHeight = "auto");
          break;
        default:
          break;
      }
    },
    // 选择区域
    handleCheckItem(type, id, index) {
      switch (type) {
        case "area":
          if (id === "all") {
            this.listParams.area_id = 0;
            this.checkAreaIndex = "all";
          } else {
            this.listParams.area_id = id;
            this.checkAreaIndex = index;
          }
          this.$toast.loading({
            duration: 0,
            message: "加载中",
            forbidClick: true,
            loadingType: "spinner",
          });
          this.checkAddressIndex = "all";
          this.checkNameIndex = "all";
          (this.checkFromIndex = "all"), (this.listParams.state_id = 0);
          this.listParams.region_id = 0;
          this.listParams.name_id = 0;
          this._getProductName(id);
          this._getProductPlace(id);
          break;
        case "address":
          if (id === "all") {
            this.listParams.region_id = 0;
            this.checkAddressIndex = "all";
          } else {
            this.listParams.region_id = id;
            this.checkAddressIndex = index;
          }
          this.$toast.loading({
            duration: 0,
            message: "加载中",
            forbidClick: true,
            loadingType: "spinner",
          });
          this.checkNameIndex = "all";
          (this.checkFromIndex = "all"), (this.listParams.state_id = 0);
          this.listParams.name_id = 0;
          this._getProductName(this.listParams.area_id, id);
          break;
        case "name":
          if (id === "all") {
            this.listParams.name_id = 0;
            this.checkNameIndex = "all";
          } else {
            this.listParams.name_id = id;
            this.checkNameIndex = index;
          }
          break;
        case "from":
          if (id === "all") {
            this.listParams.state_id = 0;
            this.checkFromIndex = "all";
          } else {
            this.listParams.state_id = id;
            this.checkFromIndex = index;
          }
          break;
        default:
          break;
      }
    },
  },
};
</script>


<style lang='scss' scoped>
.menu-tags {
  width: 100%;
  height: 84px;
  line-height: 84px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  background: #f9f9f9;
  .tags-item {
    width: 50%;
    height: 100%;
    font-weight: 600;
    position: relative;
    background: #fff;
    color: #111;
    &.hidden_type {
      background: none;
      font-weight: 400;
      .bg-tag {
        display: none;
      }
    }
    span {
      position: relative;
      z-index: 2;
    }
    .bg-tag {
      background: url("../../assets/goods/bg_tag.png") no-repeat;
      background-size: 100% 100%;
      background-position: center;
      position: absolute;
      width: 120%;
      height: 100%;
      top: 0;
      left: -28px;
    }
  }
}
.container {
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 50px;
  background-color: #f7f7f7;
  .tabbar {
    position: fixed;
    display: flex;
    box-sizing: border-box;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    background-color: #fff;
    margin-bottom: 20px;
    z-index: 2000;
    .tabbar-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      > div {
        display: block;
        height: 80px;
        line-height: 80px;
        &.active {
          border-bottom: 4px solid #fd6018;
        }
      }
      img {
        vertical-align: middle;
        width: 12px;
        height: 18px;
        margin-left: 6px;
        margin-bottom: 6px;
      }
      .screen {
        width: 18px;
        height: 18px;
      }
    }
  }

  .not-goods {
    .bg {
      height: 88vh;
      padding-top: 250px;
      background-color: #fff;
      img {
        width: 514px;
        margin-bottom: 90px;
      }
      p {
        font-size: 30px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }
    }
  }
  .goods-content {
    padding: 100px 0 50px;
  }
  .goods-items {
    min-height: 100vh;
    .loading-box {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .goods-item {
      background-color: #fff;
      margin-bottom: 25px;
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 34px 24px 30px 24px;
        border-bottom: 1px solid #f1f1f1;
        h4 {
          display: flex;
          font-size: 28px;
          color: rgba(17, 17, 17, 1);
          span {
            display: block;
            width: auto;
            height: 26px;
            line-height: 30px;
            padding: 0 2px;
            border: 2px solid #fd5f17;
            border-radius: 4px;
            font-size: 20px;
            font-weight: 400;
            color: rgba(253, 95, 24, 1);
            margin-right: 12px;
          }
        }
        p {
          font-size: 24px;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          span {
            color: #fd5f18;
          }
        }
      }
      .info {
        display: flex;
        align-items: center;
        padding: 30px 24px 32px;
        border-bottom: 1px solid #f1f1f1;
        .image {
          position: relative;
          width: 236px;
          height: 236px;
          background: rgba(237, 237, 237, 1);
          border-radius: 8px;
          overflow: hidden;

          .dialog-full {
            position: absolute;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: rgba(0, 0, 0, 0.5);
            bottom: 0;
            left: 0;
            color: #fff;
            z-index: 99;
          }
          .dialog-ds {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 77;
            background: rgba(40, 18, 11, 0.5);
            .ds-img {
              width: 52px;
              height: 68px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
          img {
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 55;
          }
          .state {
            position: absolute;
            top: 16px;
            right: 16px;
            color: #fff;
            background: #e4b05a;
            border-radius: 10px;
            z-index: 77;
            font-size: 24px;
            padding: 4px 8px 3px 8px;
          }
          .dlym-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(157, 147, 144, 0.5);
            z-index: 88;
          }
        }
        .detail {
          flex: 1;
          padding-left: 20px;
          .price {
            display: flex;
            justify-content: space-between;
            align-content: center;
            margin-bottom: 30px;
            .item {
              width: 48.5%;
              height: 84px;
              padding-top: 10px;
              line-height: 32px;
              background: rgba(249, 249, 249, 1);
              border-radius: 8px;
              p {
                font-size: 24px;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);
                &:last-of-type {
                  color: #111111;
                }
              }
            }
          }
          .rate {
            display: flex;
            justify-content: space-around;
            align-content: center;
            margin-bottom: 32px;
            .inline {
              width: 1px;
              height: 30px;
              margin-top: 14px;
              background: rgba(235, 235, 235, 1);
            }
            .item {
              p {
                font-size: 24px;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);
                &:last-of-type {
                  padding-top: 6px;
                  color: #111111;
                }
              }
            }
          }
          .stores-name {
            text-align: left;
            font-size: 22px;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            img {
              vertical-align: middle;
              width: 96px;
              height: 30px;
              margin-right: 12px;
            }
          }
        }
      }
      .agent-status {
        padding: 25px 0;
        font-size: 26px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        background: #fff0e9;
        .origin {
          color: #fe6018;
          letter-spacing: 6px;
        }
      }
    }
  }
  .dialog {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;

    .menu-item {
      background-color: #fff;
      .item {
        padding: 32px 0;
        font-size: 26px;
        font-weight: 400;
        color: rgba(17, 17, 17, 1);
        border-bottom: 1px solid #f1f1f1;
        &:last-of-type {
          border: none;
        }
      }
      .check {
        color: #fd5f18;
      }
    }
  }
  .enter {
    transform: rotateZ(180deg);
  }
  .out {
    transform: rotateZ(0deg);
  }
}
.content {
  width: 640px;
  height: 100vh;
  padding: 38px 32px;
  .menu-box {
    height: 230px;
    transition: all 0.3s linear;
    &.menu-open {
      height: auto;
    }
  }
  > .area-menu,
  > .address-menu,
  > .name-menu,
  > .form-menu {
    overflow: hidden;
    margin-bottom: 28px;
    > .title {
      display: flex;
      justify-content: space-between;
      font-size: 26px;
      font-weight: 500;
      color: rgba(17, 17, 17, 1);
      margin-bottom: 30px;
      .rotateZ {
        transform: rotateZ(180deg);
        transition: transform 0.6s;
      }
    }
    > .menu-item {
      text-align: left;
      > .item {
        display: inline-grid;
        margin: 0 auto;
        width: 178px;
        height: 68px;
        text-align: center;
        line-height: 68px;
        background: #f9f9f9;
        border-radius: 4px;
        margin: 0 20px 20px 0;
        font-size: 26px;
        font-weight: 400;
        color: #333333;
      }
      > .active {
        background-color: #ffe9df;
        color: #fe6018;
      }
      > .item:nth-of-type(3n) {
        margin: 0;
      }
    }
    > .form-menu {
      margin-bottom: 0;
    }
  }
  > .footer {
    width: 100%;
    display: flex;
    justify-content: space-around;
    .btn {
      width: 280px;
      height: 88px;
      text-align: center;
      line-height: 88px;
      color: #fe6018;
      border: 2px solid rgba(254, 96, 24, 1);
      border-radius: 4px;
      font-size: 30px;
      font-weight: 400;
      &:last-of-type {
        color: #fff;
        background-color: #fe6018;
      }
    }
  }
}
</style>
